<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <!-- 面包屑 -->


                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>
                        <a href="/">网格化管理</a>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>网格队伍管理</el-breadcrumb-item>
                </el-breadcrumb>



            </el-header>
            <el-container>
                <el-aside width="200px">
                    <!-- 树形 -->

                    <el-input v-model="filterText" class="w-60 mb-2" placeholder="关键词" />

                    <el-tree ref="treeRef" style="max-width: 600px" class="filter-tree" :data="data"
                        :props="defaultProps" default-expand-all :filter-node-method="filterNode"
                        @node-click="nodeClick" />

                </el-aside>
                <el-main>
                    <!-- 展示列表 -->

                    <div style="border: 1px solid #ccc;padding: 14px;">

                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item label="所属区域">
                                <el-input v-model="formInline.areaName" placeholder="请输入区域" clearable />
                            </el-form-item>
                            <el-form-item label="网格名称">
                                <el-input v-model="formInline.gridName" placeholder="请输入网格名称" clearable />
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="search">搜索</el-button>
                            </el-form-item>
                        </el-form>
                    </div>

                    <div style="border: 1px solid #ccc;padding: 14px; margin-top: 20px;">
                        <el-button type="success" @click="openAddDialog">添加</el-button>
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column type="index" label="序号" width="90" />
                            <el-table-column prop="areaName" label="所属区域" width="120" />
                            <el-table-column prop="gridName" label="网格名称" width="150" />
                            <el-table-column prop="grider" label="网格长" width="120" />
                            <el-table-column prop="griddeeStrs" label="网格员" width="220" />
                            <el-table-column fixed="right" label="操作" min-width="120">
                                <template #default>
                                    <el-button link type="primary" size="small" @click="handleClick">
                                        删除
                                    </el-button>
                                    <el-button link type="primary" size="small">编辑</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                </el-main>
            </el-container>
        </el-container>
    </div>
    <!-- {{ tableData }} -->
    {{ ruleForm }}

    <el-dialog v-model="dialogAdd" title="添加网格队伍" width="500">

        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
            <el-form-item label="网格名称" prop="name">
                <!-- 下拉框 -->

                <el-select v-model="ruleForm.gridId" placeholder="请选择网格">
                    <el-option v-for="item in grids" :label="item.gridName" :value="item.id" />
                </el-select>
            </el-form-item>

            <el-form-item label="所属区域" prop="areaName">
                <el-input v-model="ruleForm.areaName" disabled="true" />
            </el-form-item>


            <el-form-item label="网格长">
                <!-- 网格长下拉框 -->
                <el-select v-model="ruleForm.grider" placeholder="请选择网格">
                    <el-option v-for="item in griders" :label="item.realName" :value="item.realName" />
                </el-select>
            </el-form-item>


            <el-form-item label="网格员">
                <!-- 网格员复选框 -->

            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    Create
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'

import { ElMessage, type FilterNodeMethodFunction, type TreeInstance } from 'element-plus'
import myaxios from '@/http/myAxios';

interface Tree {
    [key: string]: any
}

const filterText = ref('')
const treeRef = ref<TreeInstance>()

const defaultProps = {
    children: 'children',
    label: 'areaName',
}

watch(filterText, (val) => {
    treeRef.value!.filter(val)
})

const filterNode: FilterNodeMethodFunction = (value: string, data: Tree) => {
    if (!value) return true
    return data.areaName.includes(value)
}

const data = ref([])
const getData = () => {
    myaxios.get('/T8/Team/GetAreaTree').then(res => {

        data.value = res.data.data
    })
}

//搜索-行内表单

import { reactive } from 'vue'

const formInline = reactive({
    areaName: '',
    gridName: ''
})

const tableData = ref([])

const search = () => {
    myaxios.get('/T8/Team/GetTeamListFromReadService', { params: formInline }).then(res => {
        tableData.value = res.data.data
    })

}

//添加网格弹窗
const openAddDialog = () => {
    if (ruleForm.areaName == "") {
        ElMessage.warning("请您先在左侧区域树中选择正确的区域");
    } else {
        dialogAdd.value = true;
    }
}
const dialogAdd = ref(false)

import type { FormInstance, FormRules } from 'element-plus'


const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive(
    {
        "areaId": null,
        "areaName": '',
        "gridId": null,
        "grider": "string",
        "griddeeStrs": "string"
    }
)

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules>({
    areaName: [
        { required: true, message: '请选择区域', trigger: 'blur' },

    ],

})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}


const nodeClick = (node: any) => {
    ruleForm.areaId = node.id
    ruleForm.areaName = node.areaName
}

const grids = ref([{
    "id": 693738717528069,
    "gridCode": "nankgrid",
    "gridName": "南口镇智慧网格",
    "areaId": 2,
    "areaName": "南口镇"
}])
const getGrids = () => {
    myaxios.get('/T8/Team/SearchPhysical').then(res => {
        grids.value = res.data.data
    })
}

//网格长的数据源
const griders = ref([{
    "id": 691569420115973,
    "accountName": "xiongjinliang",
    "roleId": 0,
    "realName": "熊锦亮",
    "cardId": "222222202202222222",
    "phoneNo": "13222222222",
    "roleName": "网格长",
    "departmentName": "呼兰街道办事处",
    "departmentId": 0
}])
const getGriders = () => {
    myaxios.get('/T6/Account/GetAccount').then(res => {
        griders.value = res.data.pageDatas
    })

}

onMounted(() => {
    getData()
    search()
    getGrids()
    getGriders()

})
</script>